<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="买家账户" prop="buyername">
            <el-input v-model="form.buyername" placeholder="请填写关注的用户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="买家密码" prop="userpassword">
            <el-input v-model="form.userpassword" placeholder="123456/Pass1234/Shopee123则不用填写密码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="卖家账户" prop="shopname">
            <el-input v-model="form.shopname" placeholder="请填写想被关注的店铺名称"></el-input>
          </el-form-item>
        </el-col>
          <el-col :span="10">
            <el-form-item label="卖家密码" prop="shoppassword">
              <el-input v-model="form.shoppassword" placeholder="123456/Pass1234/Shopee123则不用填写密码"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-form-item label="region" prop="region">
        <el-radio v-model="form.region" label="sg">sg</el-radio>
        <el-radio v-model="form.region" label="tw">tw</el-radio>
        <el-radio v-model="form.region" label="ph">ph</el-radio>
        <el-radio v-model="form.region" label="vn">vn</el-radio>
        <el-radio v-model="form.region" label="id">id</el-radio>
        <el-radio v-model="form.region" label="my">my</el-radio>
        <el-radio v-model="form.region" label="th">th</el-radio>
        <el-radio v-model="form.region" label="br">br</el-radio>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form.env" label="test">test</el-radio>
        <el-radio v-model="form.env" label="uat">uat</el-radio>
        <el-radio v-model="form.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit('form')">立即关注</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard" v-loading="isLoadingResult">
      <result-pane :resultReturn="resultReturn"></result-pane>
    </div>
    <br>
  </div>
</template>

<script>
  import ResultPane from './ResultPane'
  import {api, postRequest} from "@/api/commit";
  export default {
    name: "AddFollower",
    data() {
      return {
        showResultCard: false,
        isLoadingResult: false,
        form: {
          buyername: '',
          userpassword: '',
          shopname: '',
          shoppassword: '',
          region: 'sg',
          env: 'test'
        },
        rules: {
          buyername: [
            {required: true, message: 'username不能为空', trigger: 'blur'}
          ],
          shopname: [
            {required: true, message: 'shopname不能为空', trigger: 'blur'}
          ],
          region: [
            {required: true, message: 'region不能为空', trigger: 'blur'}
          ],
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ],
        }
      }
    },
    components:{
      ResultPane
    },
    methods: {
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          if (this.form.userpassword==''){
            delete this.form.userpassword
          }
          if (this.form.shoppassword==''){
            delete this.form.shoppassword
          }
          let params = Object.assign({}, this.form);
          postRequest(api['add_follower'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      }
    },
  }
</script>

<style scoped>

</style>
